@import url('../../base/base.min.css');
@function rem($size) {
    @return ($size/108)*1rem;
}

body {
    background-color: #23150A;
}

.header {
    width: 100%;
    position: relative;
    img {
        width: 100%;
    }
    &-top {
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: rem(119);
    }
    &::before {
        content: '';
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: rem(1000);
        height: rem(423);
        background: url('../img/cheer.png')no-repeat center/100% 100%;
    }
}

.wrap {
    margin: 0 auto;
    width: rem(1002);
    margin-top: rem(10);
    &-zn {
        width: 100%;
        color: white;
        transition: .3s;
        img{
            width: 100%;
        }
        &:hover{
            transform: scale(1.01);
            box-shadow: rem(1) rem(1) rem(30) black;
        }
    }
    &-title1 {
        margin: rem(60) auto rem(10);
        width: rem(433);
        height: rem(59);
        background: url('../img/title1.png')no-repeat center/100% 100%;
    }
    &-title2 {
        width: rem(434);
        height: rem(53);
        background-image: url('../img/title2.png')
    }
    &-nav {
        width: 100%;
        color: white;
        margin: rem(10) 0;
        font-size: rem(26);
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        &-li {
            transition: .3s;
            width: rem(194);
            height: rem(245);
            img{
                width: 100%;
                height: 100%;
            }
            &:hover{
                transform: scale(1.1);
                box-shadow: rem(1) rem(1) rem(30) black;
            }
        }
    }
}

.container {
    width: 100%;
    .card {
        height: rem(452);
        width: 32.3%;
        margin: rem(10) rem(5) 0;
        background-color: #4B2909;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        &-pic {
            width: 100%;
            height: 72%;
        }
        &-bar {
            flex: 1;
            width: 100%;
            box-sizing: border-box;
            padding: rem(10) rem(12);
            font-size: rem(18);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            &-h {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &-old {
                font-size: rem(16); // line-height: rem(38);
                padding-top: rem(14);
                display: inline;
                color: #999;
            }
            &-new {
                font-size: rem(18);
                display: inline;
                color: #FDFF37;
                i {
                    font-style: normal;
                    font-size: rem(28);
                    font-weight: bold;
                }
            }
            &-now{
                margin: 0 auto;
                width: 100%;
                height: rem(32);
                background: linear-gradient(to bottom,#FFBF61 10%,#f9fc24 50%,#FFBF61 90%);
                color: #c34304;
                text-align: center;
                line-height: rem(32);
                margin-top: rem(4);
                font-size: rem(18);
                font-weight: bold;
            }
        }
    }
}

footer {
    .back-top {
        width: rem(155);
        height: rem(88);
        background: url('../img/back-top.png')no-repeat center/100% 100%;
        margin: rem(50) auto;
    }
}
/* 公有 左侧导航条 */
.left-Nav-fixed{
    display: none;
    width: 100px;
    background:#101720;
    z-index: 10000;
    left:0;
    top:8%;
    position: fixed;
    padding-bottom: 100px;
  }
  .parallel-main{
      height: 100px;
  }
  .left-Nav-fixed img{
    width: 100%;
  }
  .parallel-point{
    box-sizing: border-box;
    height: 80px;
    padding:0 6.8%;
    margin-bottom:16px;
  }
  .s-backtop img{width:40px;display: block;margin: 70px auto 0;cursor: pointer;}
  .block{display:block;width:100%;height:100%}
  /* 公有 左侧导航条 */

// 媒体查询
@media screen and (max-width: 810px) {
    // .header-top{
    //     height: rem();
    // }
    .wrap {
        width: 98%;
    }
    .container .card {
        width: 49%;
        height: rem(720);
        &-bar {
            padding: rem(16);
            &-h {
                font-size: rem(36);
            }
            &-old {
                font-size: rem(26);
                line-height: rem(68);
            }
            &-new {
                font-size: rem(30);
                i {
                    font-size: rem(40);
                }
            }
            &-now{
                margin: 0 auto;
                width: 100%;
                height: rem(46);
                background: linear-gradient(to bottom,#FFBF61,#FCD424,#FFBF61);
                color: #692703;
                text-align: center;
                line-height: rem(46);
                margin-top: rem(4);
                font-size: rem(22);
                font-weight: bold;
            }
        }
    }
}

@media screen and (min-width:960px) {
    $hSize:212;
    .header {
        img{
            display: none;
        }
        height: rem($hSize*4);
        background: url('../img/banner-pc_01.jpg')no-repeat center 0, url('../img/banner-pc_02.jpg')no-repeat center rem($hSize), url('../img/banner-pc_03.jpg')no-repeat center rem(210*2), url('../img/banner-pc_04.jpg')no-repeat center rem(210*3);
        &-top {
            height: rem(119);
            background: url('../img/top-pc.png')no-repeat center/cover;
        }
    }
    .left-Nav-fixed{
        display: block;
    }
}